<template>
  <header class="app-header">
    <section class="left">
      <slot name="left">
        <div class="default-goback" @click="$router.go(-1)">
          <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" version="1.1">
            <polyline points="12,18 4,9 12,0" />
          </svg>
        </div>
      </slot>
    </section>
    <section >
      <slot></slot>
    </section>
    <section class="right">
      <slot name="right">
      </slot>
    </section>
  </header>
</template>

<script>
export default {
  data() {
    return {
    };
  },
};
</script>

<style scoped lang="less">
@import (reference) "../style/less/app.less";

.app-header {
  background: @color_header_bg;
  &>section {
    height: @height_app_header;
    line-height: @height_app_header;
  }

  .left {
    float: left;
    position: absolute;
    margin-left: @width_page_padding;
    .default-goback {
      left: 0.4rem;
      line-height: @height_app_header;
      .size(0.6rem, 0.8rem);

      svg {
        fill: none;
        stroke: #7e7e7e;
        stroke-width: 2;
      }
    }
  }

  .center {
    text-align: center;
    font-size: 0.8rem;
    font-weight: bold;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .right {
    margin-right: @width_page_padding;
    float: right;
    position: absolute;
    right: 0;
    top: 0;
  }
}
</style>
